<!-- 管理后台 | 顶栏菜单 -->
<template>
  <!-- 控制台首页 -->
  <section class="back-container">
    <Header>
      <!-- 菜单 -->
      <Menu :menuList="menuList" slot="top-menu"></Menu>
    </Header>
    <section class="back-content">
      <!-- 主体内容 -->
      <main class="back-content-main">
        <!-- 面包屑 -->
        <el-breadcrumb class="back-breadcrumb" separator="/">
          <el-breadcrumb-item v-for="(crumb, index) in breadcrumbList" :key="index">{{ crumb.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <router-view></router-view>
      </main>
    </section>
  </section>
</template>

<script>
import Header from './common/Header'
import Menu from './common/Menu'
import { mapState } from 'vuex'
export default {
  name: 'Indexv1',
  components: {Header, Menu},
  computed: mapState({
    breadcrumbList: state => state.back.breadcrumbList,
    menuList: state => state.back.menuList
  }),
  beforeDestroy () {
    this.$store.commit('back/initBreadcrumbList', [])
  }
}
</script>

<style lang="less" scoped>
.back-container {
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  .back-content {
    width: 100%;
    height: auto;
    min-height: 1000px;
    .back-content-main {
      height: 100%;
      .back-breadcrumb {
        padding: 10px 20px 10px 20px;
        width: calc(100% - 40px);
      }
    }

  }
}
</style>
